<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
    <style>
      .first {
        width: 40px;
        height: 40px;
        background-color: yellow;
        float: left;
      }
      .second {
        width: 80px;
        height: 80px;
        background-color: red;
        float: left;
      }
      .third {
        width: 60px;
        height: 60px;
        background-color: blue;
        float: left;
      }
      .father {
        border: 4px solid green;
        /* 新式清除浮动建议方案 */
        /* display: flow-root; */
      }
      /* 
      旧式清除浮动建议方案： after伪类
       */
      .father::after {
        clear: both;
        content: "";
        display: block;
      }
      
      .other {
        height: 30px;
        background-color: orange;
      }
      /* .fourth{ */
      /* border: 2px solid red; */
      /* clear 清楚  clean 清除 */
      /* clear: both;
      } */
    </style>
  </head>
  <body>
    <!-- float 布局带来的负面效应 高度塌陷 -->
    <!-- BFC 让父容器高度成为最高子标签的高度 block format  -->
    <div class="father">
      <div class="first">x</div>
      <div class="second">y</div>
      <div class="third">z</div>
      <!-- <div class="fourth"></div> -->
    </div>
    <div class="other"></div>
  </body>
</html>
